Dragonball Online Goku Hand
본문 바로가기

Effect(자바스크립트 활용)/Slider Effect 슬라이드이펙트7

"슬라이더이펙트 07" : 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) 🎞 슬라이드 이펙트 - 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는데 무한으로 작동하는 슬라이드를 만들어봅시다! 📌 플레이하면 자동으로 플레이 되고 정지버튼을 통해 정지도 가능한 것이 특징합니다. 슬라이드 이펙트 - 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 부분적인 CSS입니다. 전체적인 CSS.. 2022. 10. 21.
"슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한) 🎞 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는데 무한으로 작동하는 슬라이드를 만들어봅시다! 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 부분적인 CSS입니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; .. 2022. 10. 21.
"슬라이더이펙트 05" : 이미지 슬라이드(버튼, 닷메뉴) 🎞 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는 슬라이드를 만들어봅시다! 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 prev next CSS 부분적인 CSS입니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-.. 2022. 10. 17.
"슬라이더이펙트 04" : 좌우로 움직이기(버튼을 이용하여) 🎞 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직일 수 있게 만들어봅시다! 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드가 굉장히 길어서 코드 보기를 펼쳐 봐주세요 :) 슬라이드에 들어갈 이미지를 넣어준 후 소스보기에 넣어줘야 할 틀을 구성해줍니다. 코드 보기 javascript Slider Effect04 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 1 2 3 4 5 6 7 prev next CSS 부분적인 CSS입니다. 미디어쿼리도 사용했습니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! 코드 보기 /* sli.. 2022. 9. 19.
"슬라이더이펙트 03" : 좌로 움직이기(연속) 🎞 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 📌 흔히 우리가 아는 슬라이드 효과입니다. 왼쪽으로 슥-슥- 지나가는 슬라이드 효과를 만들어봅시다! + 연속적으로!!! 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드가 굉장히 길어서 코드 보기를 펼쳐 봐주세요 :) 슬라이드에 들어갈 이미지를 넣어준 후 소스보기에 넣어줘야 할 틀을 구성해줍니다. 코드 보기 javascript Slider Effect03 슬라이드 이펙트 - 좌로 움직이기(연속적으로) 1 2 3 4 5 6 7 소스보기 JAVASCRIPT HTML CSS const sliderWrap = document.querySelector(".slider__wra.. 2022. 9. 2.
"슬라이더이펙트 02" : 좌로 움직이기 🎞 슬라이드 이펙트 - 좌로 움직이기 📌 흔히 우리가 아는 슬라이드 효과입니다. 왼쪽으로 슥-슥- 지나가는 슬라이드 효과를 만들어봅시다! 슬라이드 이펙트 - 좌로 움직이기 효과 완성⭐️ 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 전체적인 틀을 짜주는 것입니다. javascript Slider Effect01 슬라이드 이펙트 - 트랜지션 효과 1 2 3 4 5 6 7 소스보기 JAVASCRIPT HTML CSS CSS 부분적인 CSS입니다. 미디어쿼리도 사용했습니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; jus.. 2022. 8. 30.
"슬라이더이펙트 01" : 트랜지션 효과 🎞 슬라이드 이펙트 - 트랜지션 효과 📌 transition 효과란 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것입니다. 슬라이드 이펙트 - 트렌지션 효과 완성⭐️ 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 전체적인 틀을 짜주는 것입니다. javascript Slider Effect01 슬라이드 이펙트 - 트랜지션 효과 1 2 3 4 5 6 7 소스보기 JAVASCRIPT HTML CSS CSS 부분적인 CSS입니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: c.. 2022. 8. 30.